<template>
  <div class="list-page">
    <div class="list-page-search" v-if="tableInfo.showSearch">
      <NForm
        inline
        :model="tableInfo.queryForm"
        label-width="auto"
        label-placement="left"
      >
        <NFormItem label="昵称">
          <NInput
            v-model:value="tableInfo.queryForm.nickname"
            placeholder="请输入昵称"
            clearable
            style="width: 200px"
          />
        </NFormItem>
        <NFormItem label="邮箱">
          <NInput
            v-model:value="tableInfo.queryForm.email"
            placeholder="请输入邮箱"
            clearable
            style="width: 200px"
          />
        </NFormItem>
        <NFormItem>
          <NButton type="primary" @click="queryData">
            <template #icon>
              <n-icon>
                <i class="esayIcon esayIcon-sousuo"></i>
              </n-icon>
            </template>
            <span>搜索</span>
          </NButton>
        </NFormItem>
      </NForm>
    </div>
    <div class="list-page-main">
      <div class="pb20 flex flex-between">
        <div></div>
        <div>
          <n-button
            tertiary
            circle
            @click="tableInfo.showSearch = !tableInfo.showSearch"
          >
            <template #icon>
              <i class="esayIcon esayIcon-sousuo"></i>
            </template>
          </n-button>
          <n-button class="ml15" tertiary circle @click="handToast">
            <template #icon>
              <i class="esayIcon esayIcon-daochu"></i>
            </template>
          </n-button>
          <n-button class="ml15" tertiary circle @click="handToast">
            <template #icon>
              <i class="esayIcon esayIcon-daoru"></i>
            </template>
          </n-button>
        </div>
      </div>
      <NDataTable
        v-model:checked-row-keys="tableInfo.checkedRowKeys"
        style="flex: 1"
        flex-height
        :columns="columns"
        :row-key="rowKey"
        :loading="tableInfo.listLoading"
        :data="tableInfo.tableData"
      />
      <div class="pagination mt20">
        <NPagination
          v-model:page="tableInfo.queryForm.pageNo"
          :page-count="tableInfo.total"
          :page-sizes="tableInfo.pageSizes"
          show-quick-jumper
          show-size-picker
          @updatePage="pageChange"
          @updatePageSize="sizeChange"
        />
      </div>
    </div>
    <log-list ref="logRef" />
    <user-detail ref="detailRef" @childer="handChilder" />
    <user-childer ref="childerRef" />
  </div>
</template>

<script setup lang="ts">
import { h, ref, defineAsyncComponent } from 'vue'
import {
  NButton,
  NDataTable,
  NForm,
  NFormItem,
  NIcon,
  NImage,
  NInput,
  NPagination,
  useMessage
} from 'naive-ui'
import type { DataTableColumns } from 'naive-ui'
import { useApi } from '@/hooks/useApi'
import userApi from '@/service/api/operation/user'
import { toRaw } from 'vue/dist/vue'
const LogList = defineAsyncComponent(() => import('./components/LogList.vue'))
const UserDetail = defineAsyncComponent(() => import('./components/Detail.vue'))
const UserChilder = defineAsyncComponent(
  () => import('./components/UserChilder.vue')
)

const rowKey = (row: any) => row.id

const { pageChange, sizeChange, tableInfo, queryData } = useApi({
  getData: userApi.list
})
const logRef = ref()
const handLog = (row: any) => {
  logRef.value.open(row)
}

const detailRef = ref()
const handUser = (row: any) => {
  detailRef.value.open(row.id)
}

const childerRef = ref()
const handChilder = (row: any) => {
  childerRef.value.open(row)
}
/**
 *  获取列表
 * */
const columns: DataTableColumns<any> = [
  {
    title: '头像',
    key: 'avatar',
    align: 'center',
    render(row: any) {
      return h(NImage, {
        src: row.avatar,
        width: '50'
      })
    }
  },
  {
    title: '昵称',
    key: 'nickname'
  },
  {
    title: '邮箱',
    key: 'email'
  },
  {
    title: '积分',
    key: 'integral'
  },
  {
    title: '签到天数',
    key: 'signDay'
  },
  {
    title: '操作',
    key: 'total',
    align: 'center',
    width: 200,
    render(row: any) {
      return h('div', [
        h(
          NButton,
          {
            size: 'small',
            type: 'primary',
            quaternary: true,
            onClick: () => handUser(row)
          },
          { default: () => '详情' }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            quaternary: true,
            onClick: () => handLog(row)
          },
          { default: () => '积分' }
        ),
        h(
          NButton,
          {
            size: 'small',
            type: 'warning',
            quaternary: true,
            onClick: () => handChilder(row)
          },
          { default: () => '下级' }
        )
      ])
    }
  }
]

const toast = useMessage()
const handToast = () => {
  toast.warning('开发中')
}
</script>

<style lang="scss" scoped></style>
